<html>
  <head>
    <script type="application/javascript">
      function draw() {
        var canvas = document.getElementById("canvas");
        if (canvas.getContext) {
          var ctx = canvas.getContext("2d");

          for (var i = 0; i < 4; i++) {
            for (var j = 0; j < 3; j++) {
              ctx.beginPath();
              var x = 25 + j * 50; // x 坐标值
              var y = 25 + i * 50; // y 坐标值
              var radius = 20; // 圆弧半径
              var startAngle = 0; // 开始点
              var endAngle = Math.PI + (Math.PI * j) / 2; // 结束点
              var anticlockwise = i % 2 == 0 ? false : true; // 顺时针或逆时针

              ctx.arc(x, y, radius, startAngle, endAngle, anticlockwise);

              if (i > 1) {
                ctx.fill();
              } else {
                ctx.stroke();
              }
            }
          }
        }
      }
    </script>
  </head>
  <body onload="draw();">
    <canvas id="canvas" width="150" height="200"></canvas>
  </body>
</html>
